<!doctype html>

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="resources/css/gxt-all.css" />

    <title>JLayout</title>
    
    <script type="text/javascript" language="javascript" src="showcase/showcase.nocache.js"></script>
    <script type="text/javascript" src="js/shCore.js"></script>
    <script type="text/javascript" src="js/shBrushJava.js"></script>
    <link href="css/shCore.css" rel="stylesheet" type="text/css" />
	<link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" />
	
	<style type="text/css">
		hr {
			border: 0;
			width: 90%;
			color: #aaaaaa;
			background-color: #aaaaff;
			height: 1px;
		}
		
		h1 {
			font-size: 16px;
			padding-bottom: 0.5em;
		}
		
		h2 {
			font-size: 12px;
		}
		
		.demo {
			width: 995px;
			margin-top: 2.5em;
			margin-left: 1em;
			font: 11px tahoma; 
		}
		
		.list
		{
			margin-top: 0.5em;
			margin-bottom: 0.5em;
			padding-left: 40px;
			list-style: disc outside none;
		}
		
		p {
			margin-top: 0.5em;
			margin-bottom: 1em;
		}
		
		.src {
			margin-top: 1em;
			font-weight: bold;
		}
		
		.link1 {
			margin-left: 0.5em;
			line-height: 16px;
		}
		
		.link2{
			margin-left: 1.5em;
			line-height: 16px;
		}
		
		.code
		{
			font-size: 16px;
		}
	</style>
  </head>


  <body>

    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
    
    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>

<div style="width: 995px">

<div class="demo" style="margin-top: 0.5em">
	<h1><a name="jlayout_link">JLayout</a></h1>
	
	
	<p>JLayout is an advanced layout container for GXT 2.0.  The source code is available here: <a href="http://code.google.com/p/jlayout">http://code.google.com/p/jlayout</a> under the Apache license 2.0.</p>
	
	<!-- <p>Some of the included features are:</p>
	<ul class="list">
	<li>insets</li>
    <li>variable cell gaps</li>
    <li>row and column span</li>
    <li>cells which may grow based on "weights"</li>
    <li>components can "fill" cells</li>
    <li>horizontal and vertical alignments</li>
    <li>size groups</li>
    <li>debugging</li>
    </ul><br/> -->
    
    <a href="#jlayout_link" class="link1">JLayout</a><br/>
	<a href="#overview_link" class="link2">Overview</a><br/>
	<a href="#why_link" class="link2">Why JLayout?</a><br/>
	
    <a href="#getting_started_link" class="link1">Getting Started</a><br/>

	<a href="#demos_link" class="link1">Demos</a><br/>
	<a href="#horizontal_link" class="link2">Horizontal Alignment</a><br/>
	<a href="#vertical_link" class="link2">Vertical Alignment</a><br/>
	<a href="#growing1_link" class="link2">Growing Demo 1</a><br/>
	<a href="#growing2_link" class="link2">Growing Demo 2</a><br/>
	<a href="#growing3_link" class="link2">Growing Demo 3</a><br/>
	<a href="#growing4_link" class="link2">Growing Demo 4</a><br/>
	<a href="#showdown_link" class="link2">Layout Manager Showdown</a><br/><br/>
	
    <h2><a name="overview_link">Overview</h2>
    <p>JLayout is flexible layout container which positions it's components into a grid. Some of the included features are:</p>
	<ul class="list">
	<li>layout insets (margin)</li>
    <li>variable cell gaps</li>
    <li>row and column span</li>
    <li>cells which may grow based on "weights"</li>
    <li>components can "fill" cells</li>
    <li>horizontal and vertical alignments</li>
    <li>size groups</li>
    <li>debugging</li>
    </ul>
    
    <p>The layout algorithm is loosely derived from the <a href="http://www.w3.org/TR/CSS2/tables.html#auto-table-layout">CSS2 table layout algorithm</a>.  The API and demos are heavily inspired by <a href="http://www.miglayout.com">MigLayout</a> - a popular Swing layout manager.  <!-- Strings are used to make the layout code easier to type and read - like MigLayout.  But in this case they're only used where they can be cached.  GWT will internally cache equivalent Strings as a single variable.  So specifying "left" all throughout the code instead of JLayoutContainer.LEFT does not increase the size of the compiled JS.--></p>

	<h2><a name="why_link">Why JLayout?</a></h2>
	<p>JLayout addresses some of the shortcomings of GXT layouts, HTML, and CSS.  In GWT and GXT, dealing with internationalized text can often be problematic.  Developers will often hard code sizes to allow for the longest internationalized label, but this often makes the layout look strange with smaller sized labels in other locales. Another issue that often arises is aligning components across multiple rows in a "grid". The only GXT layout manager that really supports this is TableLayout, which as the name implies uses an HTML table under the hood.  HTML tables will get the job done for a basic grid layout, but they do not size their children and the CSS2 specification is ambiguous in how HTML tables are rendered.  For instance, different browsers distribute remaining width and height to columns and rows differently, especially when column and row spans are used.</p>
	
	<p>The same problem exists in HTML and CSS.  So, grids are generally defined in CSS with hard coded widths so that components can be aligned across rows (just look at any of the hundreds of CSS grid generators).</p>
	
	<p>JLayout attempts to solve all of these problems.  It handles alignment across rows, explicitly defines how columns and rows should expand based on grow weights, and handles spanned columns and rows as developers expect.</p>
	
</div>

<div class="demo">
	<h1><a name="getting_started_link">Getting Started</a></h1>
	
	<p>Simply add the JAR to your classpath and inherit the JLayout module as follows:</p>
	<pre>&lt;inherits name='org.jlayout.layout.JLayout'/&gt;</pre><br/>
	
	<p>Create a JLayoutContainer and add components to it. CC is the class used to specify <b>C</b>omponent <b>C</b>onstraints, much like you would use RowData for RowLayout or FitData for FitLayout.  <b>wrap()</b> simply means "Components added AFTER this one will be added to the NEXT row." The only quirky line here is c.layout().  If JLayoutContainer is not sized (from a parent Layout or directly on the container), you need to call JLayoutContainer.layout() manually.  You can call layout() before or after render, it does not matter.</p>
	
	<div class="code">
	<script type="syntaxhighlighter" class="brush: java"><![CDATA[
JLayoutContainer c = new JLayoutContainer();
c.add(new Text("Label1"));
c.add(new TextField<String>());
c.add(new Text("Label2"));
c.add(new TextField<String>(), new CC().wrap());
c.add(new Text("Label3"));
c.add(new TextField<String>());
RootPanel.get().add(c);
c.layout();
]]></script></div>

	<div id="gs1" style="border: 1px solid #aaaaaa"></div><br/>
	
	<p>Our components were added as expected with some natural gaps, but we can make it look better.  The first improvement is using LC, or Layout Constraints, to define an 8px margin around the form.  Next, AC, or Axis Constraints, are specified for the columns.  We create a 24px gap at gap index 1.  In JLayout, indices begin at 0. The column at index 0 contains Label1 and Label3.  The column at index 1 contains two text fields.  Gaps, however, exist BETWEEN columns.  So gap 0 exists between column 0 and column 1.  Gap 1 exists between column 1 and the column containing "Label2".  Finally, a 6px gap is added BETWEEN all rows.</p>

	<div class="code">
	<script type="syntaxhighlighter" class="brush: java"><![CDATA[
JLayoutContainer c = new JLayoutContainer(
	new LC().insets(8),	// layout constraints
	new AC().gapAt(24, 1), // column constraints
	new AC().gap(6)); // row constraints
]]></script></div>

	<div id="gs2" style="border: 1px solid #aaaaaa"></div><br/>
	
	<p>Next, we want the text field following Label 2 to fill the remaining space. We force the last column (index 3), to grow with weight 100.  We could have used any weight &gt; 0 here, since this is the only column that grows.  We also enable debugging on the layout constraints to see what's going on.</p>
	
	<div class="code">
	<script type="syntaxhighlighter" class="brush: java"><![CDATA[
JLayoutContainer c = new JLayoutContainer(
	new LC().insets(8).debug(),	// layout constraints
	new AC().gapAt(24, 1).growAt(100, 3), // column constraints
	new AC().gap(6)); // row constraints
]]></script></div>

	<div id="gs3" style="border: 1px solid #aaaaaa"></div><br/>
	
	<p>The last column did indeed grow, but the component inside remained the same size. To synchronize the size of the component with the size of the column, we use the syncWidth() component constraint.  We could also specify fill(...) in the column constraints to synchronize ALL components contained inside the column with the column width.  The complete code is shown below.</p>
	
	<div class="code">
	<script type="syntaxhighlighter" class="brush: java; highlight: [8]"><![CDATA[
JLayoutContainer c = new JLayoutContainer(
	new LC().insets(8).debug(),	// layout constraints
	new AC().gapAt(24, 1).growAt(100, 3), // column constraints
	new AC().gap(6)); // row constraints
c.add(new Text("Label1"));
c.add(new TextField<String>());
c.add(new Text("Label2"));
c.add(new TextField<String>(), new CC().wrap().syncWidth());
c.add(new Text("Label3"));
c.add(new TextField<String>());
RootPanel.get().add(c);
c.layout();
]]></script></div>

	<div id="gs4" style="border: 1px solid #aaaaaa"></div><br/>
</div>

<div class="demo">
	<h1><a name="demos_link">Demos</a></h1>

	<h2><a name="horizontal_link">Horizontal Alignment</a></h2>
	<p>Shows how alignment of components are specified.</p>
	
	<div id="horizontal">
	</div>
	
	<p class="src">Source Code:</p>
</div>

	<script type="syntaxhighlighter" class="brush: java"><![CDATA[
JLayoutContainer c = new JLayoutContainer(
	new LC().wrap(5),
	new AC().align("left", "left", "center", "right").gap("unrel").fillAt(true, 4),
	new AC().gap("unrel"));
c.add(label(""));
c.add(label("left"));
c.add(label("center"));
c.add(label("right"));
c.add(label("fill"));
addRow(c, "First Name");
addRow(c, "Phone Number");
addRow(c, "Facsmile");
addRow(c, "Email");
addRow(c, "Address");
addRow(c, "Other");
]]></script>

<hr/>

<div class="demo">
	<h2><a name="vertical_link">Vertical Alignment</a></h2>
	<p>Shows how alignment of components are specified.</p>
	
	<div id="vertical">
	</div>
	
	<p class="src">Source Code:</p>
</div>

	<script type="syntaxhighlighter" class="brush: java"><![CDATA[
JLayoutContainer c = new JLayoutContainer(
	new LC().wrap(4),
	new AC().gap("unrel"),
	new AC().align("top", "middle", "bottom").gap("unrel").fillAt(true, 3).gap("unrel"));
addVerticalRow(c, "top");
addVerticalRow(c, "center");
addVerticalRow(c, "bottom");
addVerticalRow(c, "fill");
]]></script>

<hr/>

<div class="demo">
	<h2><a name="growing1_link">Growing Demo 1</a></h2>
	<p>The first column does not grow.  The second column grows filling the remaining space.</p>
	
	<div id="growing1">
	</div>
	
	<p class="src">Source Code:</p>
</div>

	<script type="syntaxhighlighter" class="brush: java"><![CDATA[
TextField<String> field = new TextField<String>();
field.setWidth(50);
		
JLayoutContainer c = new JLayoutContainer(new LC(), new AC().grow(0, 100).fill(true));
c.add(label("Fixed"));
c.add(label("Gets all extra space"), new CC().wrap());
c.add(field);
c.add(new TextField<String>());
]]></script>

<hr/>

<div class="demo">
	<h2><a name="growing2_link">Growing Demo 2</a></h2>
	<p>The first column does not grow.  The second and third columns fill the remaining space.  Note: The third grow weight was omitted on purpose to illustrate a point.  When specifying constraints such as grow and align, if more columns or rows exist than constraints specified, the last constraint value is used instead.  So grow(0, 50) is equivalent to grow(0, 50, 50)</p>
	
	<div id="growing2">
	</div>
	
	<p class="src">Source Code:</p>
</div>

	<script type="syntaxhighlighter" class="brush: java"><![CDATA[
TextField<String> field = new TextField<String>();
field.setWidth(50);
		
JLayoutContainer c = new JLayoutContainer(new LC(), new AC().grow(0, 50).fill(true));
c.add(label("Fixed"));
c.add(label("Gets half of extra space"));
c.add(label("Gets half of extra space"), new CC().wrap());
c.add(field);
c.add(new TextField<String>());
c.add(new TextField<String>());
]]></script>

<hr/>

<div class="demo">
	<h2><a name="growing3_link">Growing Demo 3</a></h2>
	<p>Illustrates percentage growing</p>
	
	<div id="growing3">
	</div>
	
	<p class="src">Source Code:</p>
</div>

	<script type="syntaxhighlighter" class="brush: java"><![CDATA[
JLayoutContainer c = new JLayoutContainer(new LC(), new AC().grow(33, 67).fill(true));
c.add(label("Gets 33% of extra space"));
c.add(label("Gets 67% of extra space"), new CC().wrap());
c.add(new TextField<String>());
c.add(new TextField<String>());
]]></script>

<hr/>

<div class="demo">
	<h2><a name="growing4_link">Growing Demo 4</a></h2>
	<p>Illustrates vertical percentage growing</p>
	
	<div id="growing4">
	</div>
	
	<p class="src">Source Code:</p>
</div>

	<script type="syntaxhighlighter" class="brush: java"><![CDATA[
JLayoutContainer c = new JLayoutContainer(
	new LC().wrap(2), new AC(), new AC().grow(0, 33, 67).fill(true));
c.setHeight(200);
c.add(label("Fixed"));
c.add(new TextField<String>());
c.add(label("Gets 25% of extra space"));
c.add(new TextField<String>());
c.add(label("Gets 75% of extra space"));
c.add(new TextField<String>());
]]></script>

<hr/>

<div class="demo">
	<h2><a name="showdown_link">Layout Manager Showdown</a></h2>
	<p>Solution to the Swing <a href="http://weblogs.java.net/blog/2006/10/25/layout-manager-showdown-we-have-results">layout manager showdown</a></p>
	
	<div id="showdown" style="background-color: #eeeeff">
	</div>
	
	<p class="src">Source Code:</p>
</div>

	<script type="syntaxhighlighter" class="brush: java"><![CDATA[
AC cc = new AC();
cc.gap("unrel", "rel", "unrel", "rel");
cc.growAt(15, 0);
cc.growAt(50, 2, 4);
cc.fillAt(true, 2, 4);
cc.alignAt("right", 1);
		
JLayoutContainer c = new JLayoutContainer();
c.setLayoutConstraints(new LC().insets("unrel"));
c.setColumnConstraints(cc);
c.setRowConstraints(new AC().gap("rel").growAt(100, 7).gapAt("unrel", 6));
		
c.add(new TextArea(), new CC().spany(8).syncSize());
c.add(label("Last Name"));
c.add(field());
c.add(label("First Name"));
c.add(field(), new CC().wrap());
		
c.add(label("Phone"));
c.add(field());
c.add(label("Email"));
c.add(field(), new CC().wrap());
		
c.add(label("Address 1"));
c.add(field(), new CC().spanx(3).wrap());
		
c.add(label("Address 2"));
c.add(field(), new CC().spanx(3).wrap());
		
c.add(label("City"));
c.add(field(), new CC().wrap());
		
c.add(label("State"));
c.add(field());
c.add(label("Postal Code"));
c.add(field(), new CC().wrap());
		
c.add(label("Country"));
c.add(field(), new CC().wrap());
		
c.add(buttons(), new CC().alignX("center").alignY("top").spanx(4));
c.setHeight(400);
]]></script>

</div>
	<script type="text/javascript">
     SyntaxHighlighter.all()
	</script>
    
  </body>
</html>
